<template>
  <div id="reportingType">
      <div class="main">
          <div id="mainreport"></div>
          <div id="mainreport2"></div>
          <div id="mainreport3"></div>
          <div>排放类</div>
          <div>环境类</div>
          <div>其他类</div>
      </div>
  </div>
</template>

<script>
import axios from 'axios'
import echarts from 'echarts' //引入echarts
export default {
  name: 'reportingType',
  data () {
    return {
      report1:{data:[],name:[]},
      report2:{data:[],name:[]},
      report3:{data:[],name:[]},
    }
  },
  mounted(){
    this.getData();
    var that = this;
    setInterval(that.getData,5000)
  },
  methods:{
    getData(){
      var that = this;
      axios.get("index.php?g=api&m=index&a=popular")
      .then(function(res){
        var data = res.data.content;
        console.log(data,66612626637)
        for(var i=0;i<data.one.data.length;i++){
          that.report1.data.push(Number(data.one.data[i].number))
        }
        that.report1.name = data.one.name;
        for(var i=0;i<data.two.data.length;i++){
          that.report2.data.push(Number(data.two.data[i].number))
        }
        that.report2.name = data.two.name;
        for(var i=0;i<data.tree.data.length;i++){
          that.report3.data.push(Number(data.tree.data[i].number))
        }
        that.report3.name = data.tree.name;
        that.getReport();
        that.getReport2();
        that.getReport3();
      })
    },
    getReport(){
      var data = this.report1.data;
      console.log(data,99999)
      var name = this.report1.name;
      var myChart = this.$echarts.init(document.getElementById('mainreport'));
      console.log(1111,myChart)
      var option = null;
      option = {
          tooltip: {
            show: true,   // 是否显示提示框，默认为true
            trigger: 'item', // 数据项图形触发
            axisPointer: {   // 指示样式
              type: 'shadow',
              axis: 'auto'
            },
            icon: "circle",
            textStyle: {   // 提示框内容的样式
              color: '#FFF',
              fontSize:10,
            }
          },
          grid: {  
            bottom:"35%"  
            },  
          xAxis: {
            type: 'category',
            position:"bottom",
            axisLabel: {
                            show: true,
                            rotate: 40, // 旋转角度
                            margin: 10, // 刻度标签与轴线之间的距离
                            textStyle: {
                                color: '#ffffff',
                                fontSize:6
                            }
                        },
            axisLine: {       // 坐标轴 轴线
              show: true,  // 是否显示
              // ------   线 ---------
              lineStyle: {
                color: '#FFF',
                width: 6,
                type: 'solid'
              }
            },
            data: name
          },
          yAxis: {
            show: false,  // 是否显示
            axisLabel : {
                            textStyle: {
                                color: '#ffffff',
                                fontSize:20
                            }
                        },
            
            // splitArea: {     // 网格区域
            //   show: true   // 是否显示，默认为false
            // }
          },
          // Declare several bar series, each will be mapped
          // to a column of dataset.source by default.
          series: [
              {
                type: 'bar',
                data: data,
                barWidth:8,
                itemStyle:{
　　　　　　　　normal:{
　　　　　　　　　　//每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
　　　　　　　　　　color: function (params){
 
　　　　　　　　　　　　//我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
　　　　　　　　　　　　var colorList = [
 
　　　　　　　　　　　　　　　　　　　　['#FE69A8','#FF875E'],
　　　　　　　　　　　　　　　　　　　　['#FF800A','#FFB01A'],
                                    ['#FFFC1D','#AAA80A'],
                                    ['#6CD13A','#B5F197'],
                                    ['#119BD2','#3AD1BF'],
 
　　　　　　　　　　　　　　　　　　　];
 
                              var index=params.dataIndex;
                              if(params.dataIndex >= colorList.length){
                                      index=params.dataIndex-colorList.length;
                               }
 
　　　　　　　　　　　　      return new echarts.graphic.LinearGradient(0, 0, 0, 1,
　　　　　　　　　　　　　     [
　　　　　　　　　　　　　　       {offset: 0, color: colorList[index][0]},
　　　　　　　　　　　　　　       {offset: 1, color: colorList[index][1]}
　　　　　　　　　　　　　     ]);
　　　　　　　　　　},
　　　　　　　　},
　　　　　
　　　　}
            }
          ]
      };
      if (option && typeof option === "object") {
            myChart.setOption(option, true);
      }
      //console.log("执行力",option)
    },
    getReport2(){
      var data = this.report2.data;
      var name = this.report2.name;
      var myChart = this.$echarts.init(document.getElementById('mainreport2'));
      console.log(1111,myChart)
      var option = null;
      option = {
          tooltip: {
            show: true,   // 是否显示提示框，默认为true
            trigger: 'item', // 数据项图形触发
            axisPointer: {   // 指示样式
              type: 'shadow',
              axis: 'auto'
            },
            icon: "circle",
            textStyle: {   // 提示框内容的样式
              color: '#FFF',
              fontSize:10,
            }
          },
          grid: {  
            bottom:"35%"  
            },  
          xAxis: {
            type: 'category',
            position:"bottom",
            axisLabel: {
                            show: true,
                            rotate: 40, // 旋转角度
                            margin: 10, // 刻度标签与轴线之间的距离
                            textStyle: {
                                color: '#ffffff',
                                fontSize:6
                            }
                        },
            axisLine: {       // 坐标轴 轴线
              show: true,  // 是否显示
              // ------   线 ---------
              lineStyle: {
                color: '#FFF',
                width: 6,
                type: 'solid'
              }
            },
            data: name
          },
          yAxis: {
            show: false,  // 是否显示
            axisLabel : {
                            textStyle: {
                                color: '#ffffff',
                                fontSize:20
                            }
                        },
            // splitArea: {     // 网格区域
            //   show: true   // 是否显示，默认为false
            // }
          },
          // Declare several bar series, each will be mapped
          // to a column of dataset.source by default.
          series: [
              {
                type: 'bar',
                data: data,
                barWidth:8,
                itemStyle:{
　　　　　　　　normal:{
　　　　　　　　　　//每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
　　　　　　　　　　color: function (params){
 
　　　　　　　　　　　　//我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
　　　　　　　　　　　　var colorList = [
 
　　　　　　　　　　　　　　　　　　　　['#FE69A8','#FF875E'],
　　　　　　　　　　　　　　　　　　　　['#FF800A','#FFB01A'],
                                    ['#FFFC1D','#AAA80A'],
                                    ['#6CD13A','#B5F197'],
                                    ['#119BD2','#3AD1BF'],
 
　　　　　　　　　　　　　　　　　　　];
 
                              var index=params.dataIndex;
                              if(params.dataIndex >= colorList.length){
                                      index=params.dataIndex-colorList.length;
                               }
 
　　　　　　　　　　　　      return new echarts.graphic.LinearGradient(0, 0, 0, 1,
　　　　　　　　　　　　　     [
　　　　　　　　　　　　　　       {offset: 0, color: colorList[index][0]},
　　　　　　　　　　　　　　       {offset: 1, color: colorList[index][1]}
　　　　　　　　　　　　　     ]);
　　　　　　　　　　},
　　　　　　　　},
　　　　　
　　　　}
                
            }
          ]
      };
      if (option && typeof option === "object") {
            myChart.setOption(option, true);
      }
      console.log("执行力",option)
    },
    getReport3(){
      var data = this.report3.data;
      var name = this.report3.name;
      var myChart = this.$echarts.init(document.getElementById('mainreport3'));
      console.log(1111,myChart)
      var option = null;
      option = {
          tooltip: {
            show: true,   // 是否显示提示框，默认为true
            trigger: 'item', // 数据项图形触发
            axisPointer: {   // 指示样式
              type: 'shadow',
              axis: 'auto'
            },
            icon: "circle",
            textStyle: {   // 提示框内容的样式
              color: '#FFF',
              fontSize:10,
            }
          },
          grid: {  
            bottom:"35%"  
            },  
          xAxis: {
            type: 'category',
            position:"bottom",
            axisLabel: {
                            show: true,
                            rotate: 40, // 旋转角度
                            margin: 10, // 刻度标签与轴线之间的距离
                            textStyle: {
                                color: '#ffffff',
                                fontSize:6
                            }
                        },
            axisLine: {       // 坐标轴 轴线
              show: true,  // 是否显示
              // ------   线 ---------
              lineStyle: {
                color: '#FFF',
                width: 6,
                type: 'solid'
              }
            },
            data: name
          },
          yAxis: {
            show: false,  // 是否显示
            axisLabel : {
                            textStyle: {
                                color: '#ffffff',
                                fontSize:20
                            }
                        },
            // splitArea: {     // 网格区域
            //   show: true   // 是否显示，默认为false
            // }
          },
          // Declare several bar series, each will be mapped
          // to a column of dataset.source by default.
          series: [
              {
                type: 'bar',
                data: data,
                barWidth:8,
                itemStyle:{
　　　　　　　　normal:{
　　　　　　　　　　//每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
　　　　　　　　　　color: function (params){
 
　　　　　　　　　　　　//我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
　　　　　　　　　　　　var colorList = [
 
　　　　　　　　　　　　　　　　　　　　['#FE69A8','#FF875E'],
　　　　　　　　　　　　　　　　　　　　['#FF800A','#FFB01A'],
                                    ['#FFFC1D','#AAA80A'],
                                    ['#6CD13A','#B5F197'],
                                    ['#119BD2','#3AD1BF'],
 
　　　　　　　　　　　　　　　　　　　];
 
                              var index=params.dataIndex;
                              if(params.dataIndex >= colorList.length){
                                      index=params.dataIndex-colorList.length;
                               }
 
　　　　　　　　　　　　      return new echarts.graphic.LinearGradient(0, 0, 0, 1,
　　　　　　　　　　　　　     [
　　　　　　　　　　　　　　       {offset: 0, color: colorList[index][0]},
　　　　　　　　　　　　　　       {offset: 1, color: colorList[index][1]}
　　　　　　　　　　　　　     ]);
　　　　　　　　　　},
　　　　　　　　},
　　　　　
　　　　}
                
            }
          ]
      };
      if (option && typeof option === "object") {
            myChart.setOption(option, true);
      }
      console.log("执行力",option)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    #reportingType{
        width:465px;
        height:300px;
        padding:0 20px 0 20px;
        background-image: url(https://yxhz.cst-info.cn/admin/themes/simplebootx/Public/yxshow/img/report.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    #reportingType .main{
      width:100%;
      height:100%;
      display: flex;
      justify-content: space-between;
      position:relative;
    }
    #reportingType #mainreport,#reportingType #mainreport2,#reportingType #mainreport3{
      width:30%;
      height:100%;
    }
    #reportingType .main div:nth-child(4){
      position:absolute;
      color:#FFF;
      font-size:15px;
      bottom:25px;
      left:42px;
    }
    #reportingType .main div:nth-child(5){
      position:absolute;
      color:#FFF;
      font-size:15px;
      bottom:25px;
      left:190px;
    }
    #reportingType .main div:nth-child(6){
      position:absolute;
      color:#FFF;
      font-size: 15px;
      bottom:25px;
      left:340px;
    }
</style>